<script setup lang='tsx' name='SongSheetItem'>
import { ref, reactive, computed } from 'vue';
import { Play } from '@vicons/ionicons5'
import { Play20Regular } from '@vicons/fluent'
import { toCurrRem } from '@/utils/rem'
import { handlePlayCount } from '@/utils'
type Props = {
    title: string
    imgUrl: string
    playCount: number
}
withDefaults(defineProps<Props>(), {})
const emit = defineEmits<{
    click: []
}>()
</script>

<template>
    <div class='song-sheet-item' @click="$emit('click')">
        <div class='song-sheet-item-img cursor-pointer'>
            <img class="song-img" :src="imgUrl" alt="">
            <div class="play-icon">
                <n-icon size="20" :component="Play" color="#ec4141" />
            </div>
            <div class="play-count-icon">
                <n-icon size="18" :component="Play20Regular" color="#fff" />
                <span>{{ handlePlayCount(playCount) }}</span>
            </div>
        </div>
        <p class="song-title cursor-pointer">{{ title }}</p>
    </div>
</template>

<style lang='scss' scoped>
.song-sheet-item {

    .song-sheet-item-img {
        margin-bottom: 6px;
        position: relative;
        width: 100%;
        height: auto;

        .play-count-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .song-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        &:hover {
            .play-icon {
                opacity: 1;
            }
        }

        .play-icon {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            width: 34px;
            height: 34px;
            opacity: 0;
            transition: .7s;

            .n-icon {
                transform: translateX(1px)
            }
        }
    }

    .song-title {
        @include text-ellipsis-multi(2);
        height: 40px;
        line-height: 20px;
        padding: 0 4px;
        width: 100%;
        font-size: 16px;
    }
}
</style>